#playbar{
	display: block;
	position: fixed;
	box-sizing: border-box;
	bottom: 0;left: 0;
	height: 64px;
	width: 100%;
	background-color: rgba(32,32,32,0.97);
	z-index: 10;
	/*transform&drag cause button unfocus*/
	-webkit-app-region: no-drag;
	/*backdrop-filter: blur(18px);*/
}

#playbar #mediainfo,
#playbar #timeline,
#playbar #controller,
#playbar #extra,
#playbar #playlist,
#playbar .bgblur,
#playbar .drag
{
	position: absolute;
}

#playbar #mediainfo{
	bottom: 0;
	left: 0;
	height: 64px;
	width: 282px;
	overflow: hidden;
	cursor: pointer;
	-webkit-app-region: no-drag;
}
#playbar #mediainfo:hover::before{
	content: "\e70e";
	font-family: "groove style";
	color: rgba(255,255,255,0.9);
	background-color: rgba(0,0,0,0.1);
	text-align: center;
	line-height: 64px;
	width: 64px;
	height: 64px;
	padding-right: calc(100% - 64px);
	position: absolute;
	z-index: 1;
}
#playbar.extend #mediainfo:hover::before{
	content: none;
}


#mediainfo>.cover,
#mediainfo>.song,
#mediainfo>.related
{
	position: absolute;
}
#mediainfo>.cover{
	margin: 8px;
	width: 48px;height: 48px;
	background-color: rgba(255,255,255,0.1);
	background-position: center;
	background-size: cover;
	left: 0px;bottom: 0px;
	z-index: 0;
}
#mediainfo>.song,#mediainfo>.related{
	color: #ffffff;
	left: 64px;
	max-width: 210px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	z-index: 2;
}
#mediainfo>.song{
	bottom: 34px;
	font-size: 15px;
}
#mediainfo>.related{
	bottom: 12px;
	font-size: 14px;
	opacity: 0.7;
}
#mediainfo>.song::before{
	content: attr(name);
}
#mediainfo>.related::before{
	content: attr(artist);
}
#playbar #timeline{
	bottom: 0px;
	left: 300px;
	height: 64px;
	width: calc(100% - 300px - 270px);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#timeline .time{
	font-size: 11px;
	color: #ffffff;
	line-height: 66px;/*for vertical center*/
	height: 64px;
	cursor: default;
}
#progressbar{
	-webkit-app-region: no-drag;
	margin: 15px 12px 17px 12px;/*15+17 for vertical center*/
	height: 32px;
	flex-basis: auto;
	flex-grow: 1;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
}
#progressbar .filler{
	position: relative;
	display: inline-block;
	margin: 17px 0;
	height: 2px;	
}
#progressbar .filler.played{
	background-color: rgba(255,255,255,1);
	-webkit-transition:width 0.08s linear;
}
#progressbar .filler.unplayed{
	width: 100%;
	background-color: rgba(255,255,255,0.4);
}
#progressbar .cursor{
	position: relative;
	display: inline-block;
	margin: 9px 0px 9px 0px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	box-sizing: border-box;
	border: 2px solid #ffffff;
	-webkit-transition:all 0.04s linear;
}
#progressbar .cursor:hover{
	border: 2px solid rgba(255,255,255,0.6);
}
#progressbar .cursor:active{
	background-color: #ffffff;
}


#playbar #controller{
	bottom: 0px;
	/*right: 12px;*/
	left: calc(100% - 252px);
	height: 64px;
	width: 240px;
	display: flex;
}
#playbar #extra{
	bottom: 24px;
	height: 64px;
	width: 96px;
	right: 10px;
	display: flex;
}
#controller button,#extra button{
	font-family: "groove style";
	width: 36px;height: 36px;
	margin: auto;
	border-radius: 50%;
	color: rgba(255,255,255,1);
	font-size: 20px;
	cursor: pointer;
	-webkit-transition:all 0.08s linear;
}
#controller button:hover,#extra button:hover{
	color: rgba(255,255,255,0.4);
}
#controller button:active,#extra button:active{
	color: rgba(255,255,255,1);
	background-color: rgba(0,0,0,0.2);
}
button.previous::after{
	content: "\e892";
}
button.play::after{
	content: "\e768";
}
button.pause::after{
	content: "\e769";
}
button.next::after{
	content: "\e893";
}
button.random::after{
	content: "\e8b1";
}
button.cycle::after{
	content: "\e8ee";
}
button.cycle.single::after{
	content: "\e8ed";
}
button.list::after{
	content: "\e93f";
}
button.download::after{
	content: "\e896";
}
button.fold::after{
	content: "\e70d";
}
button.random.on,button.cycle.all,button.cycle.single{
	background-color: rgba(255,255,255,0.2);
}
button.download.ing{
	-webkit-animation: twinkle 1s ease-in-out infinite;
}
@-webkit-keyframes twinkle {
	0% {
		background-color: rgba(255,255,255,0.2);
	}
	50% {
		background-color: rgba(255,255,255,0);
	}
	100% {
		background-color: rgba(255,255,255,0.2);
	}
}

#playbar,
#playbar #mediainfo,
#playbar #mediainfo>.cover,
#playbar #mediainfo>.song,
#playbar #mediainfo>.related,
#playbar #timeline,
#playbar #controller,
#playbar #extra,
#playbar .bgblur,
#playbar .drag
{
	-webkit-transition: all 0.36s cubic-bezier(0.37, -0.11, 0.14, 0.85);
}


#playbar .bgblur{
	width: 100%;
	height: 100%;
    padding: 50px;
    margin: -50px;
	overflow: hidden;
	-webkit-filter: blur(20px);
	background-position: top;
	background-size: cover;
	z-index: -1;
}
#playbar .bgblur::after{
	content: " ";
	width:	100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.6);
}
#playbar.extend .drag{
	top: 0;left: 0;
	width: 100%;
	height: 40px;
	-webkit-app-region: drag;
}
#playbar .fold{
	margin: 6px auto;
	font-family: "groove style";
	color: #ffffff;
	cursor: pointer;
	width: 28px;
	height: 28px;
}
#playbar .fold:hover{
	color: rgba(255,255,255,0.6);
}
#playbar .fold:active{
	color: rgba(255,255,255,0.3);
}


#playbar .bgblur,
#playbar .bgblur::after,
#playbar .drag,
#playbar #extra,
#playbar #playlist
{
	opacity: 0;
	visibility: hidden;
}


#playbar.extend{
	width: 100%;
	height: 100%;
}
#playbar.extend .bgblur,
#playbar.extend .drag,
#playbar.extend #extra
{
	opacity: 1;
	visibility: visible;
}
#playbar.extend #mediainfo{
	bottom: 130px;
	left: 24px;
	height: 110px;
	width: calc(100% - 48px);
	cursor: default;
}
#playbar.extend #mediainfo>.cover{
	width: 110px;
	height: 110px;
	margin: 0;
}
#playbar.extend #mediainfo>.song{
	font-size: 34px;
	bottom: 44px;
}
#playbar.extend #mediainfo>.related{
	font-size: 18px;
	opacity: 1;
	bottom: 16px;
}
#playbar.extend #mediainfo>.song,
#playbar.extend #mediainfo>.related
{
	font-weight: 200;
	left: 126px;
	max-width: calc(100% - 126px);
}
#playbar.extend #mediainfo>.related::after{
	content: " • " attr(album);
}
#playbar.extend #timeline{
	bottom: 72px;
	left: 24px;
	width: calc(100% - 48px);
}
#playbar.extend #controller{
	bottom: 24px;
	left: 10px;
}
#playbar.extend #controller button:active,
#playbar.extend #extra button:active
{
	background-color: rgba(255,255,255,0.12);
}


#playbar.list .bgblur::after{
	opacity: 1;
	visibility: visible;
}
#playbar.list #mediainfo,
#playbar.list #timeline,
#playbar.list #controller,
#playbar.list #extra
{
	transform: translateY(-540px);
}



#playbar.list #playlist{
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}
#playbar #playlist{
	bottom: 0px;
	transform: translateY(540px);/*cause button unfoucs*/
	height: 540px;
	padding:0 24px;
	width: 100%;
	box-sizing: border-box;
	overflow-y: scroll;
	-webkit-transition: 0.12s transform cubic-bezier(0.37, -0.11, 0.14, 0.85) 0.3s;
}
#playlist>.entry{
	position: relative;
	-webkit-app-region: no-drag;
	height: 48px;
	line-height: 48px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 200;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	cursor: default;
}

#playlist .entry .back{
	height: 100%;width: 100%;
	position: absolute;
}
#playlist .entry:hover .back{
	background-color: rgba(255,255,255,0.05);
}
#playlist .entry .back:active{
	background-color: rgba(255,255,255,0.1);
}
#playlist .entry .back:active + .front{
	padding: 0 40px;
	-webkit-transition: padding ease-out 0s;
}
#playlist>.entry .front{
	height: 100%;width: 100%;
	position: absolute;
	box-sizing: border-box;
	display: flex;
	padding: 0 28px;
	-webkit-transition: padding ease-out 0.18s;
	pointer-events: none;
}
#playlist>.entry .song .name,
#playlist>.entry .artist,
#playlist>.entry .album,
#playlist>.entry .duration
{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
#playlist .entry .song{
	display: flex;
	width: 40%;
	padding-right: 18px;
	box-sizing: border-box;
	overflow: hidden;
}
#playlist .entry .song .name{
	flex-shrink: 0;
	max-width: 100%;
}
#playlist .entry .artist,.entry .album{
	width: 28%;
	padding-right: 18px;
	box-sizing: border-box;
}
#playlist .duration{
	width: 4%;
	text-align: right;
}
#playlist .entry button{
	font-family: "groove style";
	font-size: 16px;
	width: 48px;
	height: 48px;
	color: #ffffff;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	pointer-events: auto;
}
#playlist .entry button.play{
	margin-left: 16px;
}
#playlist .entry button.play::after{
	content: "\e768";
}
#playlist .entry button.remove::after{
	content: "\e711";
}
#playlist .entry button.remove{
	margin-right: auto;
}
#playlist .entry:hover button{
	opacity: 1;
	visibility: visible;
}
#playlist .entry:hover .song .name{
	max-width: calc(100% - 2 * 48px)
}
#playlist .entry button:hover{
	background-color: rgba(255,255,255,0.08);
}
#playlist .entry.playing .song .name::before{
	content: "\e93d";
	font-family: "groove style";
	color: #ffffff;
	margin-right: 6px;
	font-size: 15px;
	vertical-align: sub;
}

